<template>
  <div class="view-main">
    <div class="view-header">
        <div></div>
      <el-button class="button" type="primary" size="small" @click="handleAdd">添加</el-button>
    </div>
    <div class="view-body">
      <div class="light-table">
        <el-table :data="tableData" height="300" highlight-current-row style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
          <el-table-column property="realName" label="姓名" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="username" label="用户名" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="phone" label="手机号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="email" label="邮箱" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="createTime" label="创建时间" align="center" width="180"></el-table-column>
          <el-table-column label="状态" align="center" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.locked ? '禁用' : '启用' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="330">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" class="danger-color" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :total="total" :current-page="pageNum" :page-size.sync="pageSize" :page-count="pages" @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>
    <el-dialog class="no-bottom-padding user-dialog" :title="typeText" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px" size="mini" style="padding-right: 20px" :disabled="type === 2">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="addForm.realName" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model.number="addForm.phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="addForm.roleIds" multiple placeholder="请选择" style="width: 100%">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="type < 2">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateConfirm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkLoginName, checkPhone, checkEmail, checkObj, isEmpty, stringFormat } from '../../utils/util'

export default {
  name: 'user',
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pages: 0,
      total: 0,
      type: 0,
      dialogVisible: false,
      addRules: {
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        username: [{ required: true, validator: checkLoginName, trigger: 'blur' }],
        phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        email: [{ required: true, validator: checkEmail, trigger: 'blur' }],
        roleIds: [{ required: true, message: '请选择角色', validator: checkObj, trigger: ['blur', 'change'] }]
      },
      roleList: [],
      addForm: {
        realName: '',
        username: '',
        phone: '',
        email: '',
        password: '123456',
        roleIds: []
      },
      url: {
        page: '/sys/user',
        delete: '/sys/user/{}',
        export: '/sys/log/export',
        roleList: '/sys/role/list'
      }
    }
  },
  computed: {
    typeText() {
      return this.type === 0 ? '新增' : this.type === 1 ? '修改' : '详情'
    }
  },
  watch: {},
  created() {
    this.getDataList(1)
    this.getRoleList()
  },
  methods: {
    handleDetail(row) {
      this.addForm = JSON.parse(JSON.stringify(row))
      this.type = 2
      this.dialogVisible = true
      if (!isEmpty(this.$refs.addForm)) {
        this.$refs.addForm.resetFields()
      }
    },
    handleUpdate(row) {
      this.addForm = JSON.parse(JSON.stringify(row))
      this.type = 1
      this.dialogVisible = true
      if (!isEmpty(this.$refs.addForm)) {
        this.$refs.addForm.resetFields()
      }
    },
    handleDelete(row) {
      this.$confirm('确认删除?', '提示', { type: 'warning' })
        .then(() => {
          if (!isEmpty(row) && !isEmpty(row.id)) {
            var url = stringFormat(this.url.delete, [row.id])
            this.$http.delete(url).then(() => {
              this.getDataList()
            })
          }
        })
        .catch(() => {})
    },
    getDataList(page) {
      this.pageNum = isEmpty(page) ? this.pageNum : page
      this.$http
        .get(this.url.page, {
          params: {
            _pageNum: this.pageNum,
            _pageSize: this.pageSize
          }
        })
        .then(data => {
          var result = data.result
          this.tableData = result.records
          this.pageNum = result.current
          this.pageSize = result.size
          this.pages = result.pages
          this.total = result.total
        })
    },
    handlePageChange(page) {
      this.getDataList(page)
    },
    handleSizeChange() {
      this.getDataList()
    },
    getRoleList() {
      this.$http.get(this.url.roleList).then(data => {
        this.roleList = data.result
      })
    },
    handleAdd() {
      this.type = 0
      this.addForm = {
        realName: '',
        username: '',
        phone: '',
        email: '',
        password: '123456',
        roleIds: []
      }
      this.dialogVisible = true
      if (!isEmpty(this.$refs.addForm)) {
        this.$refs.addForm.resetFields()
      }
    },
    updateConfirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let _form = JSON.parse(JSON.stringify(this.addForm))
          if (this.type === 0) {
            this.$http.post('/boot/sys/user', _form).then(() => {
              this.getDataList(1)
            })
          } else {
            this.$http.put(`/boot/sys/user/${_form.id}`, _form).then(() => {
              this.getDataList()
            })
          }
          this.dialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped></style>

<style lang="less" scoped>
    .view-header{
        height: 0px;
    }
    .button{
        position: relative;
        top: -18px;
    }
    .dialog-footer{
        margin-right: 32px;
    }
</style>